import React, { CSSProperties, useState } from 'react'
import { Text, TouchableOpacity } from 'react-native'

const BTN = (props) => {
  const [lastClickTime, setLastClickTime] = useState(0)
  const onePress = (fn) => () => {
    const clickTime = Date.now()
    if (!lastClickTime || Math.abs(lastClickTime - clickTime) > 1000) {
      setLastClickTime(clickTime)
      fn()
    }
  }
  return (
    <TouchableOpacity style={props.style} onPress={props.onPress && onePress(props.onPress)}>
      {props.children}
    </TouchableOpacity>
  )
}

const EBTN = (props) => {
  const { children, onPress, title, titleStyle, buttonStyle, containerStyle, disabled, activeOpacity } = props
  const [lastClickTime, setLastClickTime] = useState(0)
  const onePress = (fn) => () => {
    const clickTime = Date.now()
    if (!lastClickTime || Math.abs(lastClickTime - clickTime) > 1000) {
      setLastClickTime(clickTime)
      fn()
    }
  }

  const disabledTitleStyle = disabled ? { color: '#ccc' } : {}
  const disabledStyle = disabled ? { backgroundColor: '#f2f2f2' } : {}

  return (
    <TouchableOpacity
      disabled={disabled}
      style={[{ alignItems: 'center', justifyContent: 'center' }, buttonStyle, containerStyle, disabledStyle]}
      onPress={onPress && onePress(onPress)}
    >
      <Text style={[{ textAlign: 'center' }, titleStyle, disabledTitleStyle]}>
        {title}
      </Text>
    </TouchableOpacity>
  )
}

export { BTN, EBTN }
